<script setup>
import Pagination from '@/components/pagination.vue';
import NoteCard from './noteCard.vue';
import NoteDrawer from './noteDrawer.vue'
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

import { Plus, Refresh, Search, User } from '@element-plus/icons-vue'

import { getPublicNoteList, searchPublicNoteList, getMyNoteList } from '@/api/note'

const router = useRouter()

const loading = ref(false)
const noteData = ref([])
const page = ref(1)
const pageSize = ref(3)
const pageSizes = [3, 4, 5, 6, 100]
const total = ref(0)

const getDataList = async () => {
    loading.value = true
    try {
        const res = await getPublicNoteList(page.value, pageSize.value)
        console.log(res.data.list);
        noteData.value = res.data.list
        total.value = res.data.total
    } finally {
        loading.value = false
    }
}

const search = ref('')
// 搜索
const handleSearch = async () => {
    if (search.value.trim() === '') {
        ElMessage({
            message: '请输入搜索内容',
            type: 'warning'
        })
        return
    }

    loading.value = true
    try {
        const result = await searchPublicNoteList(page.value, pageSize.value, search.value)
        noteData.value = result.data.list
        total.value = result.data.total
    } finally {
        loading.value = false
        search.value = ''
    }
}

//分页逻辑
const handlePagination = () => {
    getDataList()
}

const drawerRef = ref()
const handleOpen = () => {
    drawerRef.value.open({
        title: '发布贴子',
        data: {}
    })
}

const handleInvite = () => {
    router.push({
        path: 'mynote',
        query: {
            id: 2
        }
    })
}

onMounted(() => {
    getDataList()
})

</script>
<template>
    <NoteDrawer ref="drawerRef"></NoteDrawer>
    <div class="forum-table" v-loading="loading">
        <div class="forum-search" v-show="!loading">
            <div class="left">
                <el-input class="ipt" :prefix-icon="Search" v-model="search" placeholder="请输入搜索内容"
                    @keyup.enter="handleSearch" />
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button type="default" :icon="Refresh" class=btn @click="getDataList">重置</el-button>
            </div>
            <div class="right">
                <el-button type="success" :icon="Plus" @click="handleOpen">发布帖子</el-button>
                <el-button v-permission="Number(3)" type="warning" :icon="User" @click="handleInvite">我的受邀贴子</el-button>
            </div>
        </div>
        <div v-if="noteData.length">
            <NoteCard v-for="item in noteData" :key="item.noteId" :nodeData="item"></NoteCard>
            <Pagination :hidden="noteData.length" v-mode:page="page" v-model:pageSize="pageSize" :page_Sizes="pageSizes"
                :total="total" @pagination="handlePagination"></Pagination>
        </div>

        <el-empty v-else class="empty" description="暂无数据" />
    </div>

</template>
<style scoped lang='scss'>
.forum-search {
    display: flex;
    margin-bottom: 1rem;
    justify-content: space-between;

    .left {
        .ipt {
            width: 15rem;
            margin-right: 1rem;
        }
    }

}

.forum-table {
    width: 60rem;
    display: flex;
    flex-direction: column;
}
</style>